<!DOCTYPE html>
<html>

<head>
    <title>React样式的处理方案</title>
    <meta charset='utf-8'>
    <link href='https://cdn.maxiang.io/res-min/themes/marxico.css' rel='stylesheet'>
    <style>
        #preview-contents {
            margin-top: -20px;
        }

        img {
            width: 400px;
        }
    </style>
</head>

<body>
    <div id='preview-contents' class='note-content'>
        <h3 id="react样式的处理方案">React样式的处理方案</h3>

        <p>在vue开发中，我们可以基于<code>scoped</code>为组件设置样式私有化！</p>
        <pre class="prettyprint hljs-dark"><code class="language-css hljs"><div class="hljs-line">&lt;<span class="hljs-selector-tag">style</span> <span class="hljs-selector-tag">lang</span>="<span class="hljs-selector-tag">less</span>" <span class="hljs-selector-tag">scoped</span>&gt;
</div><div class="hljs-line"><span class="hljs-selector-class">.banner-box</span> {
</div><div class="hljs-line">  <span class="hljs-attribute">box-sizing</span>: border-box;
</div><div class="hljs-line">  <span class="hljs-attribute">height</span>: <span class="hljs-number">375px</span>;
</div><div class="hljs-line">  <span class="hljs-attribute">background</span>: <span class="hljs-number">#eee</span>;
</div><div class="hljs-line">  <span class="hljs-attribute">overflow</span>: hidden;
</div><div class="hljs-line">}
</div><div class="hljs-line"><span class="hljs-selector-pseudo">:deep(.van-swipe__indicators)</span> {
</div><div class="hljs-line">    <span class="hljs-attribute">left</span>: auto;
</div><div class="hljs-line">    <span class="hljs-attribute">right</span>: <span class="hljs-number">20px</span>;
</div><div class="hljs-line">    <span class="hljs-attribute">transform</span>: none;
</div><div class="hljs-line">}
</div><div class="hljs-line">&lt;/<span class="hljs-selector-tag">style</span>&gt;
</div></code></pre>
        <p><img longdesc="./1659102030989.png" alt="Alt text" title="" type="image/png"
                src=""
                class=""></p>
        <p><img longdesc="./1659102103527.png" alt="Alt text" title="" type="image/png"
                src=""
                class=""></p>

        <p>但是react项目中并没有类似于这样的机制！如果我们想保证“团队协作开发”中，各组件间的样式不冲突，我们则需要基于特定的方案进行处理！</p>

        <hr>

        <h4 id="1-内联样式">1. 内联样式</h4>
        <p>内联样式就是在JSX元素中，直接定义行内的样式</p>
        <pre class="prettyprint hljs-dark"><code class="language-javascript hljs"><div class="hljs-line"><span class="hljs-comment">// 调用组件的时候 &lt;Demo color="red" /&gt;</span>
</div><div class="hljs-line"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
</div><div class="hljs-line"><span class="hljs-keyword">const</span> Demo = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Demo</span>(<span class="hljs-params">props</span>) </span>{
</div><div class="hljs-line">    <span class="hljs-keyword">const</span> titleSty = {
</div><div class="hljs-line">        <span class="hljs-attr">color</span>: props.color,
</div><div class="hljs-line">        <span class="hljs-attr">fontSize</span>: <span class="hljs-string">'16px'</span>
</div><div class="hljs-line">    };
</div><div class="hljs-line">    <span class="hljs-keyword">const</span> boxSty = {
</div><div class="hljs-line">        <span class="hljs-attr">width</span>: <span class="hljs-string">'300px'</span>,
</div><div class="hljs-line">        <span class="hljs-attr">height</span>: <span class="hljs-string">'200px'</span>
</div><div class="hljs-line">    };
</div><div class="hljs-line">    <span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{boxSty}</span>&gt;</span></span>
</div><div class="hljs-line"><span class="xml">        <span class="hljs-tag">&lt;<span class="hljs-name">h1</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{titleSty}</span>&gt;</span>珠峰培训<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span></span>
</div><div class="hljs-line"><span class="xml">        <span class="hljs-tag">&lt;<span class="hljs-name">h2</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{{</span> <span class="hljs-attr">...titleSty</span>, <span class="hljs-attr">fontSize:</span> '<span class="hljs-attr">14px</span>' }}&gt;</span>珠峰培训<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span></span>
</div><div class="hljs-line"><span class="xml">    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>;
</div><div class="hljs-line">};
</div><div class="hljs-line"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> Demo;
</div></code></pre>
        <p>编译后的内容</p>
        <pre class="prettyprint hljs-dark"><code class="language-xml hljs"><div class="hljs-line"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width: 300px; height: 200px;"</span>&gt;</span>
</div><div class="hljs-line">    <span class="hljs-tag">&lt;<span class="hljs-name">h1</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"color: red; font-size: 16px;"</span>&gt;</span>珠峰培训<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
</div><div class="hljs-line">    <span class="hljs-tag">&lt;<span class="hljs-name">h2</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"color: red; font-size: 14px;"</span>&gt;</span>珠峰培训<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span>
</div><div class="hljs-line"><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</div></code></pre>
        <p>内联样式的优点：</p>
        <ul>
            <li>
                <p><strong>使用简单：</strong> 简单的以组件为中心来实现样式的添加</p>
            </li>
            <li>
                <p><strong>扩展方便：</strong> 通过使用对象进行样式设置，可以方便的扩展对象来扩展样式</p>
            </li>
            <li>
                <p><strong>避免冲突：</strong> 最终都编译为元素的行内样式，不存在样式冲突的问题</p>
            </li>
        </ul>
        <p>在大型项目中，内联样式可能并不是一个很好的选择，因为内联样式还是有局限性的：</p>
        <ul>
            <li>
                <p><strong>不能使用伪类：</strong> 这意味着 :hover、:focus、:actived、:visited 等都将无法使用</p>
            </li>
            <li>
                <p><strong>不能使用媒体查询：</strong> 媒体查询相关的属性不能使用</p>
            </li>
            <li>
                <p><strong>减低代码可读性：</strong> 如果使用很多的样式，代码的可读性将大大降低</p>
            </li>
            <li>
                <p><strong>没有代码提示：</strong> 当使用对象来定义样式时，是没有代码提示的</p>
            </li>
        </ul>

        <hr>

        <h4 id="2-使用css样式表">2. 使用CSS样式表</h4>
        <p>CSS样式表应该是我们最常用的定义样式的方式！但多人协作开发中，很容易导致组件间的样式类名冲突，从而导致样式冲突；所以此时需要我们 <code>人为有意识的</code> 避免冲突！</p>
        <ul>
            <li>
                <p>保证组件最外层样式类名的唯一性，例如：<code>路径名称 + 组件名称</code> 作为样式类名</p>
            </li>
            <li>
                <p>基于 less、sass、stylus 等css预编译语言的<code>嵌套功能</code>，保证组件后代元素的样式，都嵌入在外层样式类中！！</p>
            </li>
        </ul>
        <p><code>Demo.less</code></p>
        <pre class="prettyprint hljs-dark"><code class="hljs scss"><div class="hljs-line"><span class="hljs-selector-class">.personal-box</span> {
</div><div class="hljs-line">    <span class="hljs-attribute">width</span>: <span class="hljs-number">300px</span>;
</div><div class="hljs-line">    <span class="hljs-attribute">height</span>: <span class="hljs-number">200px</span>;
</div><div class="hljs-line">    <span class="hljs-selector-class">.title</span> {
</div><div class="hljs-line">        <span class="hljs-attribute">color</span>: red;
</div><div class="hljs-line">        <span class="hljs-attribute">font-size</span>: <span class="hljs-number">16px</span>;
</div><div class="hljs-line">    }
</div><div class="hljs-line">    <span class="hljs-selector-class">.sub-title</span> {
</div><div class="hljs-line">        <span class="hljs-selector-class">.title</span>;
</div><div class="hljs-line">        <span class="hljs-attribute">font-size</span>: <span class="hljs-number">14px</span>;
</div><div class="hljs-line">    }
</div><div class="hljs-line">}
</div></code></pre>
        <p><code>Demo.jsx</code></p>
        <pre class="prettyprint hljs-dark"><code class="language-javascript hljs"><div class="hljs-line"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
</div><div class="hljs-line"><span class="hljs-keyword">import</span> <span class="hljs-string">'./Demo.less'</span>;
</div><div class="hljs-line"><span class="hljs-keyword">const</span> Demo = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Demo</span>(<span class="hljs-params">props</span>) </span>{
</div><div class="hljs-line">    <span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">'personal-box'</span>&gt;</span></span>
</div><div class="hljs-line"><span class="xml">        <span class="hljs-tag">&lt;<span class="hljs-name">h1</span> <span class="hljs-attr">className</span>=<span class="hljs-string">'title'</span>&gt;</span>珠峰培训<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span></span>
</div><div class="hljs-line"><span class="xml">        <span class="hljs-tag">&lt;<span class="hljs-name">h2</span> <span class="hljs-attr">className</span>=<span class="hljs-string">'sub-title'</span>&gt;</span>珠峰培训<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span></span>
</div><div class="hljs-line"><span class="xml">    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>;
</div><div class="hljs-line">};
</div><div class="hljs-line"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> Demo;
</div></code></pre>
        <p>CSS样式表的优点：</p>
        <ul>
            <li>
                <p><strong>结构样式分离：</strong> 实现了样式和JavaScript的分离</p>
            </li>
            <li>
                <p><strong>使用CSS所有功能：</strong> 此方法允许我们使用CSS的任何语法，包括伪类、媒体查询等</p>
            </li>
            <li>
                <p><strong>使用缓存：</strong> 可对样式文件进行强缓存或协商缓存</p>
            </li>
            <li>
                <p><strong>易编写</strong>：CSS样式表在书写时会有代码提示</p>
            </li>
        </ul>
        <p>当然，CSS样式表也是有缺点的：</p>
        <ul>
            <li>
                <p><strong>产生冲突：</strong> CSS选择器都具有相同的全局作用域，很容易造成样式冲突</p>
            </li>
            <li>
                <p><strong>性能低：</strong> 预编译语言的嵌套，可能带来的就是超长的<code>选择器前缀</code>，性能低！</p>
            </li>
            <li>
                <p><strong>没有真正的动态样式：</strong> 在CSS表中难以实现动态设置样式</p>
            </li>
        </ul>

        <hr>

        <h4 id="3-css-modules">3. CSS Modules</h4>
        <p>CSS的规则都是全局的，任何一个组件的样式规则，都对整个页面有效；产生局部作用域的唯一方法，就是使用一个独一无二的class名字；这就是 CSS Modules 的做法！</p>
        <p><code>第一步：创建 xxx.module.css</code></p>
        <pre class="prettyprint hljs-dark"><code class="hljs css"><div class="hljs-line"><span class="hljs-selector-class">.personal</span> {
</div><div class="hljs-line">    <span class="hljs-attribute">width</span>: <span class="hljs-number">300px</span>;
</div><div class="hljs-line">    <span class="hljs-attribute">height</span>: <span class="hljs-number">200px</span>;
</div><div class="hljs-line">}
</div><div class="hljs-line"><span class="hljs-selector-class">.personal</span> <span class="hljs-selector-tag">span</span> {
</div><div class="hljs-line">    <span class="hljs-attribute">color</span>: green;
</div><div class="hljs-line">}
</div><div class="hljs-line"><span class="hljs-selector-class">.title</span> {
</div><div class="hljs-line">    <span class="hljs-attribute">color</span>: red;
</div><div class="hljs-line">    <span class="hljs-attribute">font-size</span>: <span class="hljs-number">16px</span>;
</div><div class="hljs-line">}
</div><div class="hljs-line"><span class="hljs-selector-class">.subTitle</span> {
</div><div class="hljs-line">    <span class="hljs-attribute">color</span>: red;
</div><div class="hljs-line">    <span class="hljs-attribute">font-size</span>: <span class="hljs-number">14px</span>;
</div><div class="hljs-line">}
</div></code></pre>
        <p><code>第二步：导入样式文件 &amp; 调用</code></p>
        <pre class="prettyprint hljs-dark"><code class="language-javascript hljs"><div class="hljs-line"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
</div><div class="hljs-line"><span class="hljs-keyword">import</span> sty <span class="hljs-keyword">from</span> <span class="hljs-string">'./demo.module.css'</span>;
</div><div class="hljs-line"><span class="hljs-keyword">const</span> Demo = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Demo</span>(<span class="hljs-params"></span>) </span>{
</div><div class="hljs-line">    <span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">{sty.personal}</span>&gt;</span></span>
</div><div class="hljs-line"><span class="xml">        <span class="hljs-tag">&lt;<span class="hljs-name">h1</span> <span class="hljs-attr">className</span>=<span class="hljs-string">{sty.title}</span>&gt;</span>珠峰培训<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span></span>
</div><div class="hljs-line"><span class="xml">        <span class="hljs-tag">&lt;<span class="hljs-name">h2</span> <span class="hljs-attr">className</span>=<span class="hljs-string">{sty.subTitle}</span>&gt;</span>珠峰培训<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span></span>
</div><div class="hljs-line"><span class="xml">        <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>珠峰培训<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span></span>
</div><div class="hljs-line"><span class="xml">    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>;
</div><div class="hljs-line">};
</div><div class="hljs-line"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> Demo;
</div></code></pre>
        <p><code>编译后的效果</code></p>
        <pre class="prettyprint hljs-dark"><code class="hljs stylus"><div class="hljs-line"><span class="hljs-comment">// 结构</span>
</div><div class="hljs-line">&lt;<span class="hljs-selector-tag">div</span> class=<span class="hljs-string">"demo_personal__dlx2V"</span>&gt;
</div><div class="hljs-line">    &lt;<span class="hljs-selector-tag">h1</span> class=<span class="hljs-string">"demo_title__tN+WF"</span>&gt;珠峰培训&lt;/h1&gt;
</div><div class="hljs-line">    &lt;<span class="hljs-selector-tag">h2</span> class=<span class="hljs-string">"demo_subTitle__rR4WF"</span>&gt;珠峰培训&lt;/h2&gt;
</div><div class="hljs-line">    &lt;span&gt;珠峰培训&lt;/span&gt;
</div><div class="hljs-line">&lt;/div&gt;
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><span class="hljs-comment">// 样式</span>
</div><div class="hljs-line"><span class="hljs-selector-class">.demo_personal__dlx2V</span> {
</div><div class="hljs-line">    <span class="hljs-attribute">height</span>: <span class="hljs-number">200px</span>;
</div><div class="hljs-line">    <span class="hljs-attribute">width</span>: <span class="hljs-number">300px</span>
</div><div class="hljs-line">}
</div><div class="hljs-line"><span class="hljs-selector-class">.demo_personal__dlx2V</span> <span class="hljs-selector-tag">span</span> {
</div><div class="hljs-line">    <span class="hljs-attribute">color</span>: green
</div><div class="hljs-line">}
</div><div class="hljs-line">.demo_title__tN\+WF {
</div><div class="hljs-line">    <span class="hljs-attribute">color</span>: red;
</div><div class="hljs-line">    <span class="hljs-attribute">font-size</span>: <span class="hljs-number">16px</span>
</div><div class="hljs-line">}
</div><div class="hljs-line"><span class="hljs-selector-class">.demo_subTitle__rR4WF</span> {
</div><div class="hljs-line">    <span class="hljs-attribute">color</span>: red;
</div><div class="hljs-line">    <span class="hljs-attribute">font-size</span>: <span class="hljs-number">14px</span>
</div><div class="hljs-line">}
</div></code></pre>

        <p>react 脚手架中对 CSS Modules 的配置</p>
        <pre class="prettyprint hljs-dark"><code class="language-javascript hljs"><div class="hljs-line"><span class="hljs-comment">// react-dev-utils/getCSSModuleLocalIdent.js</span>
</div><div class="hljs-line"><span class="hljs-keyword">const</span> loaderUtils = <span class="hljs-built_in">require</span>(<span class="hljs-string">'loader-utils'</span>);
</div><div class="hljs-line"><span class="hljs-keyword">const</span> path = <span class="hljs-built_in">require</span>(<span class="hljs-string">'path'</span>);
</div><div class="hljs-line"><span class="hljs-built_in">module</span>.exports = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getLocalIdent</span>(<span class="hljs-params"></span></span>
</div><div class="hljs-line"><span class="hljs-function">  context,</span>
</div><div class="hljs-line"><span class="hljs-function">  localIdentName,</span>
</div><div class="hljs-line"><span class="hljs-function">  localName,</span>
</div><div class="hljs-line"><span class="hljs-function">  options</span>
</div><div class="hljs-line"><span class="hljs-function">) </span>{
</div><div class="hljs-line">  <span class="hljs-comment">// Use the filename or folder name, based on some uses the index.js / index.module.(css|scss|sass) project style</span>
</div><div class="hljs-line">  <span class="hljs-keyword">const</span> fileNameOrFolder = context.resourcePath.match(
</div><div class="hljs-line">    <span class="hljs-regexp">/index\.module\.(css|scss|sass)$/</span>
</div><div class="hljs-line">  )
</div><div class="hljs-line">    ? <span class="hljs-string">'[folder]'</span>
</div><div class="hljs-line">    : <span class="hljs-string">'[name]'</span>;
</div><div class="hljs-line">  <span class="hljs-comment">// Create a hash based on a the file location and class name. Will be unique across a project, and close to globally unique.</span>
</div><div class="hljs-line">  <span class="hljs-keyword">const</span> hash = loaderUtils.getHashDigest(
</div><div class="hljs-line">    path.posix.relative(context.rootContext, context.resourcePath) + localName,
</div><div class="hljs-line">    <span class="hljs-string">'md5'</span>,
</div><div class="hljs-line">    <span class="hljs-string">'base64'</span>,
</div><div class="hljs-line">    <span class="hljs-number">5</span>
</div><div class="hljs-line">  );
</div><div class="hljs-line">  <span class="hljs-comment">// Use loaderUtils to find the file or folder name</span>
</div><div class="hljs-line">  <span class="hljs-keyword">const</span> className = loaderUtils.interpolateName(
</div><div class="hljs-line">    context,
</div><div class="hljs-line">    fileNameOrFolder + <span class="hljs-string">'_'</span> + localName + <span class="hljs-string">'__'</span> + hash,
</div><div class="hljs-line">    options
</div><div class="hljs-line">  );
</div><div class="hljs-line">  <span class="hljs-comment">// Remove the .module that appears in every classname when based on the file and replace all "." with "_".</span>
</div><div class="hljs-line">  <span class="hljs-keyword">return</span> className.replace(<span class="hljs-string">'.module_'</span>, <span class="hljs-string">'_'</span>).replace(<span class="hljs-regexp">/\./g</span>, <span class="hljs-string">'_'</span>);
</div><div class="hljs-line">};
</div></code></pre>
        <p><code>全局作用域</code> <br>
            CSS Modules 允许使用 :global(.className) 的语法，声明一个全局规则。凡是这样声明的class，都不会被编译成哈希字符串。</p>
        <pre class="prettyprint hljs-dark"><code class="language-javascript hljs"><div class="hljs-line"><span class="hljs-comment">// xxx.module.css</span>
</div><div class="hljs-line">:global(.personal) {
</div><div class="hljs-line">    <span class="hljs-attr">width</span>: <span class="hljs-number">300</span>px;
</div><div class="hljs-line">    height: <span class="hljs-number">200</span>px;
</div><div class="hljs-line">}
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><span class="hljs-comment">// xxx.jsx</span>
</div><div class="hljs-line"><span class="hljs-keyword">const</span> Demo = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Demo</span>(<span class="hljs-params"></span>) </span>{
</div><div class="hljs-line">    <span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">'personal'</span>&gt;</span></span>
</div><div class="hljs-line"><span class="xml">        ...</span>
</div><div class="hljs-line"><span class="xml">    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>;
</div><div class="hljs-line">};
</div></code></pre>
        <p><code>class继承/组合</code> <br>
            在 CSS Modules 中，一个选择器可以继承另一个选择器的规则，这称为”组合”</p>
        <pre class="prettyprint hljs-dark"><code class="hljs dts"><div class="hljs-line"><span class="hljs-comment">// xxx.module.css</span>
</div><div class="hljs-line">.<span class="hljs-class">title </span>{
</div><div class="hljs-line"><span class="hljs-symbol">    color:</span> red;
</div><div class="hljs-line">    font-size: <span class="hljs-number">16</span>px;
</div><div class="hljs-line">}
</div><div class="hljs-line">.<span class="hljs-class">subTitle </span>{
</div><div class="hljs-line"><span class="hljs-symbol">    composes:</span> title;
</div><div class="hljs-line">    font-size: <span class="hljs-number">14</span>px;
</div><div class="hljs-line">}
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><span class="hljs-comment">// 组件还是正常的调用，但是编译后的结果</span>
</div><div class="hljs-line"><span class="hljs-params">&lt;h1 class="demo_title__tN+WF"&gt;</span>珠峰培训<span class="hljs-params">&lt;/h1&gt;</span>
</div><div class="hljs-line"><span class="hljs-params">&lt;h2 class="demo_subTitle__rR4WF demo_title__tN+WF"&gt;</span>珠峰培训<span class="hljs-params">&lt;/h2&gt;</span>
</div></code></pre>

        <hr>

        <h4 id="react-jss">4. React-JSS</h4>
        <p>JSS是一个CSS创作工具，它允许我们使用JavaScript以生命式、无冲突和可重用的方式来描述样式。JSS 是一种新的样式策略！ ​React-JSS 是一个框架集成，可以在 React 应用程序中使用
            JSS。它是一个单独的包，所以不需要安装 JSS 核心，只需要 React-JSS 包即可。React-JSS 使用新的 Hooks API 将 JSS 与 React 结合使用。 ​</p>
        <pre class="prettyprint hljs-dark"><code class="language-javascript hljs"><div class="hljs-line"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
</div><div class="hljs-line"><span class="hljs-keyword">import</span> { createUseStyles } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-jss'</span>;
</div><div class="hljs-line"><span class="hljs-keyword">const</span> useStyles = createUseStyles({
</div><div class="hljs-line">    <span class="hljs-attr">personal</span>: {
</div><div class="hljs-line">        <span class="hljs-attr">width</span>: <span class="hljs-string">'300px'</span>,
</div><div class="hljs-line">        <span class="hljs-attr">height</span>: <span class="hljs-string">'200px'</span>,
</div><div class="hljs-line">        <span class="hljs-comment">// 基于 &amp; 实现样式嵌套</span>
</div><div class="hljs-line">        <span class="hljs-string">'&amp; span'</span>: {
</div><div class="hljs-line">            <span class="hljs-attr">color</span>: <span class="hljs-string">'green'</span>
</div><div class="hljs-line">        }
</div><div class="hljs-line">    },
</div><div class="hljs-line">    <span class="hljs-attr">title</span>: {
</div><div class="hljs-line">        <span class="hljs-comment">// 使用动态值</span>
</div><div class="hljs-line">        color: <span class="hljs-function"><span class="hljs-params">props</span> =&gt;</span> props.color,
</div><div class="hljs-line">        <span class="hljs-attr">fontSize</span>: <span class="hljs-string">'16px'</span>
</div><div class="hljs-line">    },
</div><div class="hljs-line">    <span class="hljs-comment">// 使用动态值</span>
</div><div class="hljs-line">    subTitle: <span class="hljs-function"><span class="hljs-params">props</span> =&gt;</span> {
</div><div class="hljs-line">        <span class="hljs-keyword">return</span> {
</div><div class="hljs-line">            <span class="hljs-attr">color</span>: props.color,
</div><div class="hljs-line">            <span class="hljs-attr">fontSize</span>: <span class="hljs-string">'14px'</span>
</div><div class="hljs-line">        };
</div><div class="hljs-line">    }
</div><div class="hljs-line">});
</div><div class="hljs-line"><span class="hljs-keyword">const</span> Demo = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Demo</span>(<span class="hljs-params">props</span>) </span>{
</div><div class="hljs-line">    <span class="hljs-keyword">const</span> { personal, title, subTitle } = useStyles(props);
</div><div class="hljs-line">    <span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">{personal}</span>&gt;</span></span>
</div><div class="hljs-line"><span class="xml">        <span class="hljs-tag">&lt;<span class="hljs-name">h1</span> <span class="hljs-attr">className</span>=<span class="hljs-string">{title}</span>&gt;</span>珠峰培训<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span></span>
</div><div class="hljs-line"><span class="xml">        <span class="hljs-tag">&lt;<span class="hljs-name">h2</span> <span class="hljs-attr">className</span>=<span class="hljs-string">{subTitle}</span>&gt;</span>珠峰培训<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span></span>
</div><div class="hljs-line"><span class="xml">        <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>珠峰培训<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span></span>
</div><div class="hljs-line"><span class="xml">    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>;
</div><div class="hljs-line">};
</div><div class="hljs-line"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> Demo;
</div></code></pre>
        <p>编译后的效果</p>
        <pre class="prettyprint hljs-dark"><code class="hljs subunit"><div class="hljs-line">// html结构 
</div><div class="hljs-line">&lt;div class="personal<span class="hljs-string">-0</span><span class="hljs-string">-2</span><span class="hljs-string">-16</span>"&gt;
</div><div class="hljs-line">    &lt;h1 class="title<span class="hljs-string">-0</span><span class="hljs-string">-2</span><span class="hljs-string">-17</span> title-d0<span class="hljs-string">-0</span><span class="hljs-string">-2</span><span class="hljs-string">-19</span>"&gt;珠峰培训&lt;/h1&gt;
</div><div class="hljs-line">    &lt;h2 class="subTitle<span class="hljs-string">-0</span><span class="hljs-string">-2</span><span class="hljs-string">-18</span> subTitle-d1<span class="hljs-string">-0</span><span class="hljs-string">-2</span><span class="hljs-string">-20</span>"&gt;珠峰培训&lt;/h2&gt;
</div><div class="hljs-line">    &lt;span&gt;珠峰培训&lt;/span&gt;
</div><div class="hljs-line">&lt;/div&gt;
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">// css样式
</div><div class="hljs-line">.personal<span class="hljs-string">-0</span><span class="hljs-string">-2</span><span class="hljs-string">-16</span>{
</div><div class="hljs-line">    width: 300px;
</div><div class="hljs-line">    height: 200px;
</div><div class="hljs-line">}
</div><div class="hljs-line">.title-d0<span class="hljs-string">-0</span><span class="hljs-string">-2</span><span class="hljs-string">-19</span>{
</div><div class="hljs-line">    color: red;
</div><div class="hljs-line">}
</div><div class="hljs-line">.title<span class="hljs-string">-0</span><span class="hljs-string">-2</span><span class="hljs-string">-17</span>{
</div><div class="hljs-line">    font-size: 16px;
</div><div class="hljs-line">}
</div><div class="hljs-line">.personal<span class="hljs-string">-0</span><span class="hljs-string">-2</span><span class="hljs-string">-16</span> span{
</div><div class="hljs-line">    color: green;
</div><div class="hljs-line">}
</div></code></pre>
        <p>但是从 react-jss 第10版本之后，不支持在类组件中使用，只能用于函数组件中！ <br>
            如果想在类组件中使用，还需我们自己处理一下！</p>
        <pre class="prettyprint hljs-dark"><code class="language-javascript hljs"><div class="hljs-line"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
</div><div class="hljs-line"><span class="hljs-keyword">import</span> { createUseStyles } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-jss'</span>;
</div><div class="hljs-line"><span class="hljs-keyword">const</span> useStyles = createUseStyles({
</div><div class="hljs-line">    ...
</div><div class="hljs-line">});
</div><div class="hljs-line"><span class="hljs-comment">// 高阶组件</span>
</div><div class="hljs-line"><span class="hljs-keyword">const</span> withStyles = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">withStyles</span>(<span class="hljs-params">Component</span>) </span>{
</div><div class="hljs-line">    <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">props</span>) </span>{
</div><div class="hljs-line">        <span class="hljs-keyword">const</span> styles = useStyles(props);
</div><div class="hljs-line">        <span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">Component</span> {<span class="hljs-attr">...styles</span>} /&gt;</span>;</span>
</div><div class="hljs-line"><span class="xml">    };</span>
</div><div class="hljs-line"><span class="xml">};</span>
</div><div class="hljs-line"><span class="xml">class Demo extends React.Component {</span>
</div><div class="hljs-line"><span class="xml">    render() {</span>
</div><div class="hljs-line"><span class="xml">        const { personal, title, subTitle } = this.props;</span>
</div><div class="hljs-line"><span class="xml">        return <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">{personal}</span>&gt;</span></span>
</div><div class="hljs-line"><span class="xml">            ...</span>
</div><div class="hljs-line"><span class="xml">        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>;</span>
</div><div class="hljs-line"><span class="xml">    }</span>
</div><div class="hljs-line"><span class="xml">}</span>
</div><div class="hljs-line"><span class="xml">export default withStyles(Demo);</span>
</div></code></pre>

        <hr>

        <h4 id="5-styled-components">5. styled-components</h4>
        <p>目前在React中，还流行 CSS-IN-JS 的模式：也就是把CSS像JS一样进行编写；其中比较常用的插件就是 <code>styled-components</code>！</p>
        <blockquote>
            <p>$ yarn add styled-components <br>
                <a href="https://styled-components.com/docs/basics#getting-started"
                    target="_blank">https://styled-components.com/docs/basics#getting-started</a>
            </p>
        </blockquote>
        <p><strong>创建一个样式的js文件，例如：style.js</strong> <br>
            想要有语法提示，可以安装vscode插件：vscode-styled-components</p>
        <pre class="prettyprint hljs-dark"><code class="language-javascript hljs"><div class="hljs-line"><span class="hljs-keyword">import</span> styled <span class="hljs-keyword">from</span> <span class="hljs-string">"styled-components"</span>;
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><span class="hljs-comment">// 创建公共的样式变量</span>
</div><div class="hljs-line"><span class="hljs-keyword">const</span> colorBlue = <span class="hljs-string">"#1677ff"</span>,
</div><div class="hljs-line">    colorRed = <span class="hljs-string">"#ff4d4f"</span>;
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><span class="hljs-comment">// 基础用法</span>
</div><div class="hljs-line"><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> VoteBox = styled.div<span class="hljs-string">`</span>
</div><div class="hljs-line"><span class="hljs-string">    box-sizing: border-box;</span>
</div><div class="hljs-line"><span class="hljs-string">    margin: 0 auto;</span>
</div><div class="hljs-line"><span class="hljs-string">    width: 300px;</span>
</div><div class="hljs-line"><span class="hljs-string"></span>
</div><div class="hljs-line"><span class="hljs-string">    .header{</span>
</div><div class="hljs-line"><span class="hljs-string">        display: flex;</span>
</div><div class="hljs-line"><span class="hljs-string">        justify-content: space-between;</span>
</div><div class="hljs-line"><span class="hljs-string">        align-items: center;</span>
</div><div class="hljs-line"><span class="hljs-string">        border-bottom: 1px solid #DDD;</span>
</div><div class="hljs-line"><span class="hljs-string"></span>
</div><div class="hljs-line"><span class="hljs-string">        .title {</span>
</div><div class="hljs-line"><span class="hljs-string">            font-size: 18px;</span>
</div><div class="hljs-line"><span class="hljs-string">            line-height: 50px;</span>
</div><div class="hljs-line"><span class="hljs-string">        }</span>
</div><div class="hljs-line"><span class="hljs-string"></span>
</div><div class="hljs-line"><span class="hljs-string">        .num {</span>
</div><div class="hljs-line"><span class="hljs-string">            font-size: 18px;</span>
</div><div class="hljs-line"><span class="hljs-string">            color: <span class="hljs-subst">${colorRed}</span>;</span>
</div><div class="hljs-line"><span class="hljs-string">        }</span>
</div><div class="hljs-line"><span class="hljs-string">    }</span>
</div><div class="hljs-line"><span class="hljs-string"></span>
</div><div class="hljs-line"><span class="hljs-string">    .ant-btn {</span>
</div><div class="hljs-line"><span class="hljs-string">        margin-right: 15px;</span>
</div><div class="hljs-line"><span class="hljs-string">    }</span>
</div><div class="hljs-line"><span class="hljs-string">`</span>;
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><span class="hljs-comment">// 使用传递的属性，动态设置样式  &amp;&amp;  给属性设置默认值！！</span>
</div><div class="hljs-line"><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> VoteMain = styled.div.attrs(<span class="hljs-function"><span class="hljs-params">props</span> =&gt;</span> {
</div><div class="hljs-line">    <span class="hljs-keyword">return</span> {
</div><div class="hljs-line">        <span class="hljs-attr">color</span>: props.color || colorBlue
</div><div class="hljs-line">    }
</div><div class="hljs-line">})<span class="hljs-string">`</span>
</div><div class="hljs-line"><span class="hljs-string">    padding: 15px 0;</span>
</div><div class="hljs-line"><span class="hljs-string"></span>
</div><div class="hljs-line"><span class="hljs-string">    p {</span>
</div><div class="hljs-line"><span class="hljs-string">        line-height: 35px;</span>
</div><div class="hljs-line"><span class="hljs-string">        color:<span class="hljs-subst">${props =&gt; props.color}</span>;</span>
</div><div class="hljs-line"><span class="hljs-string">        font-size: <span class="hljs-subst">${props =&gt; props.size}</span>px;</span>
</div><div class="hljs-line"><span class="hljs-string">    }</span>
</div><div class="hljs-line"><span class="hljs-string">`</span>;
</div></code></pre>
        <p><strong>组件中使用</strong></p>
        <pre class="prettyprint hljs-dark"><code class="language-javascript hljs"><div class="hljs-line"><span class="hljs-keyword">import</span> { VoteBox, VoteMain } <span class="hljs-keyword">from</span> <span class="hljs-string">'./style'</span>;
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><span class="hljs-keyword">const</span> Demo = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Demo</span>(<span class="hljs-params"></span>) </span>{
</div><div class="hljs-line">    <span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">VoteBox</span>&gt;</span></span>
</div><div class="hljs-line"><span class="xml">        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"header"</span>&gt;</span></span>
</div><div class="hljs-line"><span class="xml">            <span class="hljs-tag">&lt;<span class="hljs-name">h2</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"title"</span>&gt;</span>React是很棒的前端框架<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span></span>
</div><div class="hljs-line"><span class="xml">            <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"num"</span>&gt;</span>0<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span></span>
</div><div class="hljs-line"><span class="xml">        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>
</div><div class="hljs-line"><span class="xml">        <span class="hljs-tag">&lt;<span class="hljs-name">VoteMain</span> <span class="hljs-attr">size</span>=<span class="hljs-string">{16}</span>&gt;</span></span>
</div><div class="hljs-line"><span class="xml">            <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>支持人数：0人<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></span>
</div><div class="hljs-line"><span class="xml">            <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>反对人数：0人<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></span>
</div><div class="hljs-line"><span class="xml">            <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>支持比率：--<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></span>
</div><div class="hljs-line"><span class="xml">        <span class="hljs-tag">&lt;/<span class="hljs-name">VoteMain</span>&gt;</span></span>
</div><div class="hljs-line"><span class="xml">        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"footer"</span>&gt;</span></span>
</div><div class="hljs-line"><span class="xml">            <span class="hljs-tag">&lt;<span class="hljs-name">Button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span>&gt;</span>支持<span class="hljs-tag">&lt;/<span class="hljs-name">Button</span>&gt;</span></span>
</div><div class="hljs-line"><span class="xml">            <span class="hljs-tag">&lt;<span class="hljs-name">Button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span> <span class="hljs-attr">danger</span>&gt;</span>反对<span class="hljs-tag">&lt;/<span class="hljs-name">Button</span>&gt;</span></span>
</div><div class="hljs-line"><span class="xml">        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>
</div><div class="hljs-line"><span class="xml">    <span class="hljs-tag">&lt;/<span class="hljs-name">VoteBox</span>&gt;</span></span>
</div><div class="hljs-line">};
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> Demo;
</div></code></pre>
        <p><strong>编译后的效果</strong></p>
        <p><img longdesc="./1670242851905.png" alt="Alt text" title="" type="image/png"
                src=""
                class=""></p>

        <hr>

        <p>上面介绍了几种常用的React样式策略，这几种策略并没有绝对的好或坏，都各有优缺点，可以根据实际的业务场景去使用。</p>
    </div>
</body>

</html>